<template>
	<view>
		<!-- 头部tab栏 -->
		<view class="head-bar">
			<view class="per" :class="current == 0 ? 'active' : '' " @tap="select(0)">新品</view>
			<view class="per" :class="current == 1 ? 'active' : ''" @tap="select(1)">
				销量
				<view class="icons">
					<uni-icons type="arrowup" size="12" color="#fff" class="icon-child" :color="saleIconStatus=='up'? '#D5514C' : '#fff'"></uni-icons>
					<uni-icons type="arrowdown" size="12" color="#fff" class="icon-child" :color="saleIconStatus=='down'? '#D5514C' : '#fff'"></uni-icons>
					<!-- <view class="arr-up"></view>
					<view class="arr-down"></view> -->
				</view>
			</view>
			<view class="per" :class="current == 2 ? 'active' : ''" @tap="select(2)">
				价格
				<view class="icons">
					<uni-icons type="arrowup" size="12" color="#fff" class="icon-child" :color="priceIconStatus=='up'? '#D5514C' : '#fff'"></uni-icons>
					<uni-icons type="arrowdown" size="12" color="#fff" class="icon-child" :color="priceIconStatus=='down'? '#D5514C' : '#fff'"></uni-icons>
				</view>
			</view>
			<view class="per" :class="current == 3 ? 'active' : ''" @tap="select(3)">筛选</view>
		</view>
		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="item in productList" :key="item.id" @click="goInfo(item.id)">
				<image :src="item.pic" mode=""></image>
				
				<view class="text-area">
					<view class="name">{{item.name}}</view>
					<view class="price">{{item.price}}</view>
					<view class="origin">{{item.productCategoryName}}</view>
				</view>
				
			</view>
			<view class="product-item" v-if="productList.length % 2 != 0"></view>
		</view>
	</view>
</template>

<script>
	import { findProductList } from "../../../api/kind/product/product.js";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		data() {
			return {
				// id
				id:'',
				productList:[],
				// 当前点击
				current:'',
				saleIconStatus:"",// "" up down
				priceIconStatus:"",
				isDesc:"", //0默认降序; 1 升序 
				start:1,
				limit:5,
				sortBy:'',
			};
		},
		methods:{
			init(id){
				findProductList({categoryId:id,isDesc:this.isDesc,sortBy:this.sortBy},this.start,this.limit).then(res=>{
					// console.log(res)
					this.productList = res.data.rows;
					// console.log(this.productList)
				})
			},
			// 跳转到商品详情
			goInfo(id){
				uni.navigateTo({
					url:`/pages/home/info/info?id=${id}`
				})
			},
			// tab栏点击事件
			select(index){
				this.current = index;
				if(index==0){
					this.isDesc = "",
					this.sortBy = "",
					this.saleIconStatus = "";
					this.priceiconStatus = "";
					this.init(this.id);
				}
				else if(index==1){
					this.priceIconStatus = "";
					if(this.saleIconStatus==''){
						this.saleIconStatus='up';
						this.isDesc = 1;
					}else if(this.saleIconStatus=='up'){
						this.saleIconStatus='down';
						this.isDesc = 0;
					}else if(this.saleIconStatus == "down"){
						this.saleIconStatus = "up"
						this.isDesc = 1;
					}
					
					this.sortBy = "sale";
					this.init(this.id);
				}
				else if(index==2){
					this.saleIconStatus = "";
					if(this.priceIconStatus==''){
						this.priceIconStatus='up';
						this.isDesc = 1;
					}else if(this.priceIconStatus=='up'){
						this.priceIconStatus='down';
						this.isDesc = 0;
					}else if(this.priceIconStatus == "down"){
						this.priceIconStatus = "up"
						this.isDesc = 1;
					}
					
					this.sortBy = "price";
					this.init(this.id);
				}
				else if(index==3){
					this.isDesc = "",
					this.sortBy = "",
					this.saleIconStatus = "";
					this.priceIconStatus = "";
					this.init(this.id);
				}
				
			}
		},
		onLoad(options) {
			this.id = options.kindId;
			this.init(this.id);
			
		}
	}
</script>

<style lang="scss" scoped>
	.head-bar {
		position: fixed;
		left: 0;
		top: 42px;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 62rpx;
		padding-top: 14rpx;
		background-color: #354e44;
		color: #fff;
		font-size: 30rpx;
		line-height: 62rpx;
		z-index: 999;
		 .per {
			 display: flex;
			 align-items: center;
			 .icons {
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
				 align-items: center;
				 margin-left: 6rpx;
				 .icon-child {
					 display: flex;
					 align-items: center;
					 height: 16rpx;
					 overflow: hidden;
				 }
			 }
		 }
	}
	// 商品列表
	.product-list {
		margin-top: 120rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		.product-item {
			width: 334rpx;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 20rpx;
			 image {
				 display: block;
				 width: 100%;
				 height: 240rpx;
				 border-radius: 20rpx;
			 }
			 .text-area {
				 padding: 36rpx;
				 font-size: 26rpx;
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: space-between;
					.name {
						width: 100%;
						text-align: center;
						font-weight: 700;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-top: 15rpx;
					}
					.price ,.origin {
						// width: 75rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-top: 10rpx;
					}
			 }
		}
	}
	.active{
		color: #D5514C!important;
	  }
</style>
